<template>
  <div class="container">
    <el-row class="header">
      <el-col :span="4">
        <h3>Stable Diffusion模型</h3>
        <el-select
          v-model="selectedModel"
          placeholder="选择模型"
          style="width: 200px"
        >
          <el-option label="GhostMix" value="GhostMix" />
          <!-- 添加其他模型选项 -->
        </el-select>
      </el-col>
      <el-col :span="4">
        <h3>外挂VAE模型</h3>
        <el-select
          v-model="selectedVAE"
          placeholder="选择VAE模型"
          style="width: 200px"
        >
          <el-option
            label="KIF8Anime2VAE_Ckpt"
            value="KIF8Anime2VAE_Ckpt"
          />
          <!-- 添加其他VAE模型选项 -->
        </el-select>
      </el-col>
    </el-row>

    <div class="prompt-section">
      <div class="prompt-column">
        <div class="title">正向提示词 <span>Positive Prompt</span></div>
        <el-input
          v-model="positivePrompt"
          type="textarea"
          placeholder="请输入正向提示词"
          :rows="4"
        />

        <div class="tag-section">
          <div class="tag-top">
            <div class="t-shi">提示词</div>
            <div class="Feature">
              <div class="block">
                <img src="@/assets/index/复制_icon.png" alt="">
              </div>
              <div class="block">
                <img src="@/assets/index/删除_icon.png" alt="">
              </div>
            </div>
          </div>

          <el-tag
            v-for="(tag, index) in positiveTags"
            :key="index"
            closable
            @close="removePositiveTag(index)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-model="newPositiveTag"
            placeholder="输入一个提示词"
            class="tag-input"
            @keypress.enter.prevent="addPositiveTag"
          />
        </div>
      </div>
      <div class="column">
        <div class="line" />
      </div>
      <div class="prompt-column">
        <div class="title">负向提示词 <span>Negative Prompt</span></div>
        <el-input
          v-model="negativePrompt"
          type="textarea"
          placeholder="请输入负向提示词"
          :rows="4"
        />

        <div class="tag-section">
          <div class="tag-top">
            <div class="t-shi">提示词</div>
            <div class="Feature">
              <div class="block">
                <img src="@/assets/index/复制_icon.png" alt="">
              </div>
              <div class="block">
                <img src="@/assets/index/删除_icon.png" alt="">
              </div>
            </div>
          </div>
          <el-tag
            v-for="(tag, index) in negativeTags"
            :key="index"
            closable
            @close="removeNegativeTag(index)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-model="newNegativeTag"
            placeholder="输入一个提示词"
            class="tag-input"
            @keypress.enter.prevent="addNegativeTag"
          />
        </div>
      </div>
    </div>
    <el-row
      class="button-section"
      type="flex"
      justify="space-between"
      align="middle"
      style="padding: 10px 0; border-bottom: 1px solid #e0e0e0"
    >
      <el-col :span="12" style="display: flex; align-items: center">
        <div class="icon-button">
          <img src="../../assets/index/循环_icon.png">
        </div>
        <div class="icon-button">
          <img src="../../assets/index/icon_删除.png">
        </div>
        <div class="icon-button">
          <img src="../../assets/index/icon_保存.png">
        </div>
        <div class="icon-button">
          <img src="../../assets/index/icon_撤回.png">
        </div>
        <el-select
          v-model="Presets"
          placeholder="选择模型"
          style="width: 200px"
          class="select-speic"
        >
          <el-option label="GhostMix" value="GhostMix" />
          <!-- 添加其他模型选项 -->
        </el-select>

        <div class="icon-button" style="margin-left: 10px">
          <img src="../../assets/index/icon_刷新预设.png">
        </div>
        <div class="icon-button">
          <img src="../../assets/index/icon_填入.png">
        </div>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button
          type="primary"
          class="start-button"
          @click="startGeneration"
        >开始生图</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { EventBus } from '../../utils/eventBus'
export default {
  data() {
    return {
      selectedModel: 'GhostMix',
      selectedVAE: 'KIF8Anime2VAE_Ckpt',
      Presets: '预设',
      positivePrompt: '',
      negativePrompt: '',
      positiveTags: [],
      negativeTags: [],
      newPositiveTag: '',
      newNegativeTag: ''
    }
  },
  methods: {
    addPositiveTag() {
      if (this.newPositiveTag) {
        this.positiveTags.push(this.newPositiveTag)
        this.newPositiveTag = ''
      }
    },
    removePositiveTag(index) {
      this.positiveTags.splice(index, 1)
    },
    addNegativeTag() {
      if (this.newNegativeTag) {
        this.negativeTags.push(this.newNegativeTag)
        this.newNegativeTag = ''
      }
    },
    removeNegativeTag(index) {
      this.negativeTags.splice(index, 1)
    },
    startGeneration() {
      // console.log("开始生成图像...");
      EventBus.$emit('callDetailMethod')
    },
    resetPrompts() {
      this.positivePrompt = ''
      this.negativePrompt = ''
      this.positiveTags = []
      this.negativeTags = []
      this.newPositiveTag = ''
      this.newNegativeTag = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  // background-color: #f0f2f5;
  border-radius: 8px;
  background: linear-gradient(#edf6ff 0%, #ffffff 19%);
  box-shadow: 0px 2px 8px 0px rgba(121, 141, 183, 0.2),
    inset 0px 0px 2px 0px #cde4ff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ffffff;
}
.header {
  margin-bottom: 20px;
}
.prompt-section {
  margin-bottom: 5px;
  padding-bottom: 15px;
  border-bottom: #558dff 2px dashed;
  // display: flex;
}
.line {
  height: 200px;
  width: 2px;
  // background-color: #387aff;
  border: 1px dashed #558dff;
  margin-top: 45px !important;
}
.prompt-column {
  // padding: 10px;
  // background-color: #ffffff;
  // border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: inline-block;
  min-width: 830px;
  .title {
    border-left: 4px solid #427aef;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    span {
      color: rgb(158, 162, 169);
      font-size: 18px;
    }
  }
}
.column {
  display: inline-block;
  width: 20px;
  height: 225px;
  .line {
    margin: 0 auto;
  }
}
.tag-section {
  margin-top: 10px;
  .tag-top {
    display: flex;
    align-items: center;
  }
  .t-shi {
    color: #387aff;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC;
    height: 25px;
    font-weight: 600;
  }
  .Feature {
    width: 78px;
    height: 33px;
    background: rgba(224, 228, 236, 0.2);
    // border: 1px solid #e0e4ec;
    display: flex;
    margin-left: 10px;
    .block {
      width: 39px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #e0e4ec;
      border-radius: 4px;
      cursor: pointer;
      &:active {
        transform: scale(1.15) !important;
        transition: all 0.1s ease-in-out;
      }
    }
  }
}
.tag-input {
  margin-top: 10px;
  width: calc(100% - 1px);
}
.button-section {
  display: flex;
  justify-content: flex-end;
}
.start-button {
  margin-right: 10px;
}
.reset-button {
  color: #409eff;
}
h3,
h4 {
  margin-bottom: 10px;
}

.icon-button {
  display: inline-block;
  margin-right: 10px;
  background-color: #f5f7fa;
  width: 46px;
  height: 46px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #387aff;
  cursor: pointer;
  img {
    margin-left: 10px;
    margin-top: 10px;
  }
}
.select-speic {
  // border: solid 1px #387aff;
  // background-color: aquamarine !important;
  // // height: 100px;
  // padding-top: 20px;
  // padding-bottom: 20px;
  ::v-deep {
    .el-input__inner {
      border-color: #7ca6fb !important;
      height: 46px;
    }
  }
}

.start-button {
  margin-left: 10px;
}

.custom-icon {
  width: 1em; /* 或者你需要的尺寸 */
  height: 1em;
  margin-right: 5px; /* 可以调整图标和文本之间的距离 */
  vertical-align: middle; /* 确保图标垂直居中 */
}
</style>
